<template>
    <div>
        <table>
            <tr>
                <td>商品ID</td>
                <td>商品名称</td>
                <td>购买数量</td>
                <td>商品单价</td>
            </tr>
            <tr v-for="(item,index) in List" :key="index">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>
                    <button @click="reduce(index)">-</button>
                    {{item.count}}
                    <button @click="add(index)">+</button>
                </td>
                <td>{{item.price}}</td>
            </tr>
            <tr>
                <td colspan="2">总价：{{Prices}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
let List=[
    {
        id:1,
        name:"iphone",
        count:1,
        price:123
    },
    {
        id:2,
        name:"ipad",
        count:3,
        price:1223
    },
    {
        id:3,
        name:"apple",
        count:3,
        price:13
    },
    {
        id:4,
        name:"banana",
        count:4,
        price:13
    },
]
export default {
    name:"Liu",
    data(){
        return{
            List:List
        }
    },
      computed:{
          Prices:function(){
              let total=0
              for(var i=0;i<this.List.length;i++){
                  total+=this.List[i].count*this.List[i].price
            }
            return total
        }
    },
      methods:{
            reduce:function(index){
                if(this.List[index].count>1){
                this.List[index].count--
                }
            },
            add:function(index){
                this.List[index].count++
        }

    }
        
}  
</script>

<style scoped>
table{
     border-collapse: collapse;/* 边框合并属性  */
	 width:300px;
}
tr{
     border: 1px solid red;
}
td{
     border: 1px solid red;
};
</style>

